<template>
  <van-icon
    @click="onCollect"
    :loading="loading"
    :class="{ collected: value }"
    :name="value ? 'star' : 'star-o'"
  />
</template>

<script>
import { addCollect, deleteCollect } from "@/api/article";

export default {
  name: "CollectArticle",
  props: {
    value: {
      type: Boolean,
      required: true,
    },
    artId: {
      type: [String, Object, Number],
      required: true,
    },
  },
  data() {
    return {
      loading: false,
    };
  },
  methods: {
    async onCollect() {
      this.loading = true;
      try {
        if (this.value) {
          // 收藏状态   取消收藏
          await deleteCollect(this.artId);
        } else {
          // 取消状态 改为收藏
          await addCollect(this.artId);
        }
        // 自定义事件修改数据 不是立即的
        this.$emit("input", !this.value);
        // 因为 this.value 是要传到 父组件 然后再渲染
        // 所以不判断!this.value 直接渲染的话 还没有这个东西 所以会有问题
        this.$toast.success(!this.value ? "收藏成功" : "取消收藏");
      } catch (err) {
        this.$toast.fail("操作失败,请重试");
      }
      this.loading = false;
    },
  },
};
</script>

<style scoped lang="less">
.collected {
  color: #ffa500;
}
</style>
